<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <title>首页</title>
    <link rel="stylesheet" href="/css/element.css">
    <link rel="stylesheet" href="/css/base.css">
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

</head>
<body>
<div id="wrapper" >
    <div style="margin-top: 100px;">
        <div style="width: 550px;height: 400px;display: inline-block;">
            <div id="main" style="width: 600px;height:400px;"></div>
        </div>
        <div style="width: 550px;height: 400px;display: inline-block;">
            <div id="main2" style="width: 600px;height:400px;"></div>
        </div>
    </div>

</div>

<!--<script src="/js/echarts.min.js"></script>-->
<script src="/js/china.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/vue.min.js"></script>
<script src="/js/element.js"></script>



<script type="text/javascript">

    //    var myChart = echarts.init(document.getElementById('main'), 'light');
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom, 'light');
    var option;

    option = {
        title: {text: '本周下载收藏量统计图（次）'},
        tooltip: {trigger: 'axis'},
        legend: {data: ['下载', '收藏']},
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {type: 'value'},
        series: [
            {
                name: '下载',
                type: 'bar',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '收藏',
                type: 'bar',
                data: [220, 182, 191, 234, 290, 330, 310]
            }

        ]
    };

    option && myChart.setOption(option);


</script>

<script type="text/javascript">

    //    var myChart = echarts.init(document.getElementById('main'), 'light');
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom, 'light');
    var option;

    option = {
        title: {text: '各模块下载量分布图'},
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '模块名称',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1048, name: '体育'},
                    {value: 735, name: '学习'},
                    {value: 580, name: '电子书'},
                    {value: 484, name: '餐饮'},

                ]
            }
        ]
    };

    option && myChart.setOption(option);

</script>
</body>
</html>
